<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>CSS 第 02 天 —— 复合选择器 | 前端基础班学习笔记</title>
    <meta name="generator" content="VuePress 1.7.1">
    
    <meta name="description" content="前端基础班笔记">
    <meta name="theme-color" content="#3eaf7c">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    
    <link rel="preload" href="/basenode/assets/css/0.styles.2182318c.css" as="style"><link rel="preload" href="/basenode/assets/js/app.52c57e5d.js" as="script"><link rel="preload" href="/basenode/assets/js/2.fd1002bd.js" as="script"><link rel="preload" href="/basenode/assets/js/5.88e4a4fd.js" as="script"><link rel="prefetch" href="/basenode/assets/js/10.0fd16134.js"><link rel="prefetch" href="/basenode/assets/js/11.69b32ff0.js"><link rel="prefetch" href="/basenode/assets/js/12.8306a2fe.js"><link rel="prefetch" href="/basenode/assets/js/13.bd409108.js"><link rel="prefetch" href="/basenode/assets/js/14.397fbca0.js"><link rel="prefetch" href="/basenode/assets/js/15.3ebf464d.js"><link rel="prefetch" href="/basenode/assets/js/16.18b0f270.js"><link rel="prefetch" href="/basenode/assets/js/17.aca32580.js"><link rel="prefetch" href="/basenode/assets/js/18.b36abbab.js"><link rel="prefetch" href="/basenode/assets/js/19.40fd0225.js"><link rel="prefetch" href="/basenode/assets/js/20.9c6d2a17.js"><link rel="prefetch" href="/basenode/assets/js/21.6d37b375.js"><link rel="prefetch" href="/basenode/assets/js/22.c01d802c.js"><link rel="prefetch" href="/basenode/assets/js/23.d7de44fa.js"><link rel="prefetch" href="/basenode/assets/js/24.3470c223.js"><link rel="prefetch" href="/basenode/assets/js/3.924754cc.js"><link rel="prefetch" href="/basenode/assets/js/4.4eeb3907.js"><link rel="prefetch" href="/basenode/assets/js/6.ae7868e8.js"><link rel="prefetch" href="/basenode/assets/js/7.6ab91996.js"><link rel="prefetch" href="/basenode/assets/js/8.750a9450.js"><link rel="prefetch" href="/basenode/assets/js/9.26864b79.js">
    <link rel="stylesheet" href="/basenode/assets/css/0.styles.2182318c.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/basenode/" class="home-link router-link-active"><!----> <span class="site-name">前端基础班学习笔记</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/basenode/html/" class="nav-link">
  HTML
</a></div><div class="nav-item"><a href="/basenode/css/" class="nav-link router-link-active">
  CSS
</a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/basenode/html/" class="nav-link">
  HTML
</a></div><div class="nav-item"><a href="/basenode/css/" class="nav-link router-link-active">
  CSS
</a></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading open"><span>CSS</span> <span class="arrow down"></span></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/basenode/css/" aria-current="page" class="sidebar-link">CSS 学习</a></li><li><a href="/basenode/css/day01.html" class="sidebar-link">CSS 第 01 天 —— 基础选择器</a></li><li><a href="/basenode/css/day02.html" aria-current="page" class="active sidebar-link">CSS 第 02 天 —— 复合选择器</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/basenode/css/day02.html#能力目标" class="sidebar-link">能力目标</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/basenode/css/day02.html#css-第二天导读-一-01-08" class="sidebar-link">CSS 第二天导读（一 ~ 01'08'')</a></li></ul></li><li class="sidebar-sub-header"><a href="/basenode/css/day02.html#_1-emmet-语法-开发效率" class="sidebar-link">1. emmet 语法 —— 开发效率</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/basenode/css/day02.html#_1-1-emmet-语法生成-html-标签-一-09-57" class="sidebar-link">1.1 emmet 语法生成 html 标签（一 ~ 09'57''）</a></li><li class="sidebar-sub-header"><a href="/basenode/css/day02.html#_1-2-emmet-语法快速生成-css-样式-一-03-08" class="sidebar-link">1.2 emmet 语法快速生成 css 样式（一 ~ 03'08''）</a></li><li class="sidebar-sub-header"><a href="/basenode/css/day02.html#_1-3-快速格式化代码-一-05-29" class="sidebar-link">1.3 快速格式化代码（一 ~ 05'29''）</a></li></ul></li><li class="sidebar-sub-header"><a href="/basenode/css/day02.html#☆2-css-复合选择器-选择器" class="sidebar-link">☆2. CSS 复合选择器 —— 选择器</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/basenode/css/day02.html#_2-1-复合选择器简介-二-01-36" class="sidebar-link">2.1 复合选择器简介（二 ~ 01'36''）</a></li><li class="sidebar-sub-header"><a href="/basenode/css/day02.html#☆2-2-后代选择器-二-08-57" class="sidebar-link">☆2.2 后代选择器（二 ~ 08'57''）</a></li><li class="sidebar-sub-header"><a href="/basenode/css/day02.html#_2-3-子元素选择器-二-03-20" class="sidebar-link">2.3 子元素选择器（二 ~ 03'20''）</a></li><li class="sidebar-sub-header"><a href="/basenode/css/day02.html#_2-4-课堂练习-二-02-49" class="sidebar-link">2.4 课堂练习（二 ~ 02'49''）</a></li><li class="sidebar-sub-header"><a href="/basenode/css/day02.html#☆2-5-并集选择器-二-6-14" class="sidebar-link">☆2.5 并集选择器（二 ~ 6'14''）</a></li><li class="sidebar-sub-header"><a href="/basenode/css/day02.html#_2-6-链接伪类选择器-上-二-09-39" class="sidebar-link">2.6 链接伪类选择器(上)（二 ~ 09'39''）</a></li><li class="sidebar-sub-header"><a href="/basenode/css/day02.html#_2-7-链接伪类选择器-下-三-05-39" class="sidebar-link">2.7 链接伪类选择器(下)（三 ~ 05'39''）</a></li><li class="sidebar-sub-header"><a href="/basenode/css/day02.html#_2-8-focus-伪类选择器-三-03-05" class="sidebar-link">2.8 focus 伪类选择器（三 ~ 03'05''）</a></li><li class="sidebar-sub-header"><a href="/basenode/css/day02.html#☆2-9-复合选择器总结-三-03-03" class="sidebar-link">☆2.9 复合选择器总结（三 ~ 03'03''）</a></li></ul></li><li class="sidebar-sub-header"><a href="/basenode/css/day02.html#☆3-元素的显示模式-布局认知" class="sidebar-link">☆3. 元素的显示模式 —— 布局认知</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/basenode/css/day02.html#_3-1-什么是元素显示模式-三-04-14" class="sidebar-link">3.1 什么是元素显示模式（三 ~ 04'14''）</a></li><li class="sidebar-sub-header"><a href="/basenode/css/day02.html#_3-2-块元素-block-三-06-38" class="sidebar-link">3.2 块元素 —— block（三 ~ 06'38''）</a></li><li class="sidebar-sub-header"><a href="/basenode/css/day02.html#_3-3-行内元素-inline-三-05-36" class="sidebar-link">3.3 行内元素 —— inline（三 ~ 05'36''）</a></li><li class="sidebar-sub-header"><a href="/basenode/css/day02.html#_3-4-行内块元素-inline-block-三-03-43" class="sidebar-link">3.4 行内块元素 —— inline-block（三 ~ 03'43''）</a></li><li class="sidebar-sub-header"><a href="/basenode/css/day02.html#☆3-5-元素显示模式总结-三-03-09" class="sidebar-link">☆3.5 元素显示模式总结 ——（三 ~ 03'09''）</a></li><li class="sidebar-sub-header"><a href="/basenode/css/day02.html#☆3-6-显示模式的转换-四-08-16" class="sidebar-link">☆3.6 显示模式的转换（四 ~ 08'16''）</a></li><li class="sidebar-sub-header"><a href="/basenode/css/day02.html#☆3-7-简单小米侧边栏-四-07-29" class="sidebar-link">☆3.7 简单小米侧边栏（四 ~ 07'29''）</a></li><li class="sidebar-sub-header"><a href="/basenode/css/day02.html#☆3-8-单行文字垂直居中-四-07-10" class="sidebar-link">☆3.8 单行文字垂直居中（四 ~ 07'10''）</a></li></ul></li><li class="sidebar-sub-header"><a href="/basenode/css/day02.html#_4-背景图片-样式" class="sidebar-link">4. 背景图片 —— 样式</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/basenode/css/day02.html#_4-1-背景颜色-四-04-01" class="sidebar-link">4.1 背景颜色（四 ~ 04'01''）</a></li><li class="sidebar-sub-header"><a href="/basenode/css/day02.html#_4-2-背景图片-四-04-25" class="sidebar-link">4.2 背景图片（四 ~ 04'25''）</a></li><li class="sidebar-sub-header"><a href="/basenode/css/day02.html#_4-3-背景平铺-五-05-16" class="sidebar-link">4.3 背景平铺（五 ~ 05'16''）</a></li><li class="sidebar-sub-header"><a href="/basenode/css/day02.html#_4-4-背景位置-方位名词-五-07-34" class="sidebar-link">4.4 背景位置-方位名词（五 ~ 07'34''）</a></li><li class="sidebar-sub-header"><a href="/basenode/css/day02.html#☆4-5-背景位置案例一-五-06-57" class="sidebar-link">☆4.5 背景位置案例一（五 ~ 06'57''）</a></li><li class="sidebar-sub-header"><a href="/basenode/css/day02.html#☆4-6-王者荣耀背景图片-五-04-57" class="sidebar-link">☆4.6 王者荣耀背景图片（五 ~ 04'57''）</a></li><li class="sidebar-sub-header"><a href="/basenode/css/day02.html#_4-7-背景位置-精确单位-五-04-01" class="sidebar-link">4.7 背景位置-精确单位（五 ~ 04'01''）</a></li><li class="sidebar-sub-header"><a href="/basenode/css/day02.html#_4-8-30-背景位置-混合单位-五-04-07" class="sidebar-link">4.8 30-背景位置-混合单位（五 ~ 04'07''）</a></li><li class="sidebar-sub-header"><a href="/basenode/css/day02.html#_4-9-背景固定-六-04-21" class="sidebar-link">4.9 背景固定（六 ~ 04'21''）</a></li><li class="sidebar-sub-header"><a href="/basenode/css/day02.html#_4-10-背景属性复合写法-六-02-59" class="sidebar-link">4.10 背景属性复合写法（六 ~ 02'59''）</a></li><li class="sidebar-sub-header"><a href="/basenode/css/day02.html#_4-11-背景颜色半透明-六-06-31" class="sidebar-link">4.11 背景颜色半透明（六 ~ 06'31''）</a></li><li class="sidebar-sub-header"><a href="/basenode/css/day02.html#☆4-12-背景总结-六-03-44" class="sidebar-link">☆4.12 背景总结（六 ~ 03'44''）</a></li></ul></li><li class="sidebar-sub-header"><a href="/basenode/css/day02.html#_5-综合案例-五彩导航栏" class="sidebar-link">5. 综合案例 —— 五彩导航栏</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/basenode/css/day02.html#_5-1-「案例」演练目标" class="sidebar-link">5.1 「案例」演练目标</a></li><li class="sidebar-sub-header"><a href="/basenode/css/day02.html#_5-2-开发步骤" class="sidebar-link">5.2 开发步骤</a></li><li class="sidebar-sub-header"><a href="/basenode/css/day02.html#_5-3-代码实现" class="sidebar-link">5.3 代码实现</a></li></ul></li></ul></li><li><a href="/basenode/css/day03.html" class="sidebar-link">CSS 第 03 天 —— 盒子模型</a></li><li><a href="/basenode/css/day04.html" class="sidebar-link">CSS 第 04 天 —— 浮动</a></li><li><a href="/basenode/css/day05.html" class="sidebar-link">CSS 第 05 天 —— 学成在线</a></li><li><a href="/basenode/css/day06.html" class="sidebar-link">CSS 第 06 天 —— 定位</a></li><li><a href="/basenode/css/day07.html" class="sidebar-link">CSS 第 07 天 —— 高级技巧</a></li><li><a href="/basenode/css/day08.html" class="sidebar-link">CSS 第 08 天 —— HTML5+CSS3 提高</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="css-第-02-天-复合选择器"><a href="#css-第-02-天-复合选择器" class="header-anchor">#</a> CSS 第 02 天 —— 复合选择器</h1> <h2 id="能力目标"><a href="#能力目标" class="header-anchor">#</a> 能力目标</h2> <ol><li>能够使用 <strong>emmet</strong> 语法提高编码速度；</li> <li>能顾使用<strong>复合选择器</strong>在 HTML 中定位元素；</li> <li>能够理解元素的<strong>几种显示模式</strong>，并通过代码在不同显示模式间转换；</li> <li>能够精准控制背景图片的显示和位置。</li></ol> <h3 id="css-第二天导读-一-01-08"><a href="#css-第二天导读-一-01-08" class="header-anchor">#</a> CSS 第二天导读（一 ~ 01'08'')</h3> <blockquote><p>过渡视频，介绍第 02 天的学习路径：</p></blockquote> <ol><li>emmet 语法 —— 开发效率</li> <li>CSS 复合选择器 —— 选择器</li> <li>元素的显示模式 —— 布局</li> <li>背景图片 —— 样式</li> <li>CSS 的三大特性 —— 原理（明天讲）</li></ol> <h2 id="_1-emmet-语法-开发效率"><a href="#_1-emmet-语法-开发效率" class="header-anchor">#</a> 1. emmet 语法 —— 开发效率</h2> <h3 id="_1-1-emmet-语法生成-html-标签-一-09-57"><a href="#_1-1-emmet-语法生成-html-标签-一-09-57" class="header-anchor">#</a> 1.1 emmet 语法生成 html 标签（一 ~ 09'57''）</h3> <h4 id="_1-1-1-「emmet-语法生成-html-标签」问题"><a href="#_1-1-1-「emmet-语法生成-html-标签」问题" class="header-anchor">#</a> 1.1.1 「emmet 语法生成 html 标签」问题</h4> <ul><li>问题 1：emmet 的特点和作用是什么？</li> <li>问题 2：生成多个相同的标签用哪个符号？</li> <li>问题 3：父子关系用哪个符号？兄弟关系用哪个符号？</li> <li>问题 4：带类名或者 id 的 div 如何编写？其他标签呢？</li> <li>问题 5：自增符号是哪个符号？</li> <li>问题 6：标签内容是哪个符号？</li></ul> <h4 id="_1-1-2-「emmet-语法生成-html-标签」答案"><a href="#_1-1-2-「emmet-语法生成-html-标签」答案" class="header-anchor">#</a> 1.1.2 「emmet 语法生成 html 标签」答案</h4> <ul><li><p>问题 1：emmet 的特点和作用是什么？</p> <ul><li>通过简写提高编码效率。</li></ul></li> <li><p>emmet 生成 HTML 结构语法</p> <table><thead><tr><th>序号</th> <th>符号</th> <th>含义</th> <th>示例</th></tr></thead> <tbody><tr><td>1</td> <td><code>*N</code></td> <td><strong>连续</strong>生成 N 个</td> <td><code>div*5</code></td></tr> <tr><td>2</td> <td><code>父&gt;子</code></td> <td>生成<strong>父子关系</strong>结构</td> <td><code>ul&gt;li*5</code></td></tr> <tr><td>3</td> <td><code>兄+弟</code></td> <td>生成<strong>兄弟关系</strong>结构</td> <td><code>h1+div*2+h4+p*2</code></td></tr> <tr><td>4</td> <td><code>.class</code> / <code>#id</code></td> <td>生成带 class 或 id 的 div</td> <td><code>.red</code> / <code>#app</code></td></tr> <tr><td>5</td> <td><code>tag.class</code> / <code>tag#id</code></td> <td>生成带 class 或 id 的 tag</td> <td><code>p.red</code> / <code>span#nav</code></td></tr> <tr><td>6</td> <td><code>$*N</code></td> <td><code>$</code> 位置会被连续的数字替换</td> <td><code>.demo$*5</code></td></tr> <tr><td>7</td> <td><code>{内容$}</code></td> <td>标签内容</td> <td><code>p{段落$}*5</code></td></tr></tbody></table></li></ul> <h3 id="_1-2-emmet-语法快速生成-css-样式-一-03-08"><a href="#_1-2-emmet-语法快速生成-css-样式-一-03-08" class="header-anchor">#</a> 1.2 emmet 语法快速生成 css 样式（一 ~ 03'08''）</h3> <h4 id="_1-2-1-「emmet-语法快速生成-css-样式」问题"><a href="#_1-2-1-「emmet-语法快速生成-css-样式」问题" class="header-anchor">#</a> 1.2.1 「emmet 语法快速生成 css 样式」问题</h4> <ul><li>问题 1：emmet 生成 css 有什么规律？</li> <li>问题 2：如何设置宽高？</li> <li>问题 3：emmet 记不住怎么办？</li></ul> <h4 id="_1-2-2-「emmet-语法快速生成-css-样式」答案"><a href="#_1-2-2-「emmet-语法快速生成-css-样式」答案" class="header-anchor">#</a> 1.2.2 「emmet 语法快速生成 css 样式」答案</h4> <ul><li><p>问题 1：emmet 生成 css 有什么规律？</p> <ul><li><strong>常用属性</strong>大多用<strong>英文单词的首字母</strong>连写即可，示例如下：</li> <li><code>tac</code> → <code>text-align: center;</code></li> <li><code>ti2em</code> → <code>text-indent: 2em;</code></li> <li><code>lh26px</code> → <code>line-height: 26px;</code></li> <li><code>tdn</code> → <code>text-decoration: none;</code></li></ul></li> <li><p>问题 2：如何设置宽高？</p> <ul><li><code>w100</code> → <code>width: 100px;</code></li> <li><code>h200</code> → <code>height: 200px;</code></li></ul></li> <li><p>问题 3：emmet 记不住怎么办？</p> <ul><li>不要硬记，以完成代码为主</li> <li>会用在开发时能够快一点，不会用也不至于怎么样，做出结果最重要！</li></ul></li></ul> <h4 id="_1-2-3-「emmet-语法快速生成-css-样式」练习-05-00"><a href="#_1-2-3-「emmet-语法快速生成-css-样式」练习-05-00" class="header-anchor">#</a> 1.2.3 「emmet 语法快速生成 css 样式」练习（05'00'')</h4> <blockquote><p>提示：要养成目录和文件命名的习惯。</p></blockquote> <ol><li>练习目标：练习 <strong>emmet 语法</strong></li> <li>练习步骤：
<ol><li>新建文件 <code>emmet练习.html</code>；</li> <li>按照老师笔记中整理的 emmet 语法尝试快速输入 html 和 css。</li></ol></li></ol> <h3 id="_1-3-快速格式化代码-一-05-29"><a href="#_1-3-快速格式化代码-一-05-29" class="header-anchor">#</a> 1.3 快速格式化代码（一 ~ 05'29''）</h3> <h4 id="_1-3-1-「快速格式化代码」问题"><a href="#_1-3-1-「快速格式化代码」问题" class="header-anchor">#</a> 1.3.1 「快速格式化代码」问题</h4> <ul><li>问题 1：你认为程序员编写出符合规范的代码重要吗？为什么？</li></ul> <h4 id="_1-3-2-「快速格式化代码」答案"><a href="#_1-3-2-「快速格式化代码」答案" class="header-anchor">#</a> 1.3.2 「快速格式化代码」答案</h4> <ul><li><p>问题 1：你认为程序员编写出符合规范的代码重要吗？为什么？</p> <ul><li>非常重要</li> <li>代码是最好的文档，代码的可读性非常重要，代码写得规范，是专业性的体现</li></ul></li></ul> <h4 id="_1-3-3-「快速格式化代码」扩展-保存时自动格式化-05-00"><a href="#_1-3-3-「快速格式化代码」扩展-保存时自动格式化-05-00" class="header-anchor">#</a> 1.3.3 「快速格式化代码」扩展 —— 保存时自动格式化（05'00''）</h4> <ol><li><p>ctrl + <code>,</code> → 首选项 / 设置</p></li> <li><p>输入 <code>format</code>，勾选 <code>Format On Save</code>，如下图所示：</p> <p><img src="/basenode/assets/img/format-on-save.3c9c6113.png" alt="保存时自动格式化"></p> <div class="custom-block tip"><p class="custom-block-title">TIP</p> <ul><li>VSCode 自带的格式化器能够在保存时自动格式化 HTML 代码（包含其中的 CSS）</li> <li>VSCode 自带的格式化器目前不支持单独的 CSS 文件做格式化</li></ul></div></li></ol> <h2 id="☆2-css-复合选择器-选择器"><a href="#☆2-css-复合选择器-选择器" class="header-anchor">#</a> ☆2. CSS 复合选择器 —— 选择器</h2> <h3 id="_2-1-复合选择器简介-二-01-36"><a href="#_2-1-复合选择器简介-二-01-36" class="header-anchor">#</a> 2.1 复合选择器简介（二 ~ 01'36''）</h3> <h4 id="_2-1-1-「复合选择器简介」问题"><a href="#_2-1-1-「复合选择器简介」问题" class="header-anchor">#</a> 2.1.1 「复合选择器简介」问题</h4> <ul><li>问题 1：复合选择器具有什么特点？</li> <li>问题 2：复合选择器能解决什么问题？</li> <li>问题 3：常用的复合选择器有几类？</li></ul> <h4 id="_2-1-2-「复合选择器简介」答案"><a href="#_2-1-2-「复合选择器简介」答案" class="header-anchor">#</a> 2.1.2 「复合选择器简介」答案</h4> <ul><li><p>问题 1：复合选择器具有什么特点？</p> <ul><li>对基础选择器进行组合</li> <li>由两个或多个基础选择器，通过不同方式组合而成的</li></ul></li> <li><p>问题 2：复合选择器能解决什么问题？</p> <ul><li>更准确、更高效的选择目标元素</li></ul></li> <li><p>问题 3：常用的复合选择器有几类？</p> <ul><li>4 类，本别是：<strong>后代</strong>、<strong>子代</strong>、<strong>并集</strong>、<strong>伪类</strong></li></ul></li></ul> <h3 id="☆2-2-后代选择器-二-08-57"><a href="#☆2-2-后代选择器-二-08-57" class="header-anchor">#</a> ☆2.2 后代选择器（二 ~ 08'57''）</h3> <h4 id="_2-2-1-「后代选择器」问题"><a href="#_2-2-1-「后代选择器」问题" class="header-anchor">#</a> 2.2.1 「后代选择器」问题</h4> <ul><li>问题 1：后代选择器的应用场景是什么？</li> <li>问题 2：后代选择器的语法格式是什么？元素之间使用什么符号分开？</li> <li>问题 3：后代选择器最终选中的元素是父代元素还是子代元素？</li> <li>问题 4：后代选择器的元素除了使用标签选择器，还可以使用其他的基础选择器吗？</li></ul> <h4 id="_2-2-2-「后代选择器」答案"><a href="#_2-2-2-「后代选择器」答案" class="header-anchor">#</a> 2.2.2 「后代选择器」答案</h4> <ul><li><p>问题 1：后代选择器的应用场景是什么？</p> <ul><li>可以选择父元素中的子元素</li></ul></li> <li><p>问题 2：后代选择器的语法格式是什么？元素之间使用什么符号分开？</p> <ul><li><p>语法格式</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">选择器1 选择器2</span> <span class="token punctuation">{</span>样式声明<span class="token punctuation">;</span><span class="token punctuation">}</span>
</code></pre></div></li> <li><p><strong>后代选择器</strong>的选择器之间使用<strong>空格</strong>分开。</p></li></ul></li> <li><p>问题 3：后代选择器最终选中的元素是父代元素还是子代元素？</p> <ul><li>后代选择器最终选中的元素是<strong>子代元素</strong> → <strong>后代元素</strong></li></ul></li> <li><p>问题 4：后代选择器的元素除了使用标签选择器，还可以使用其他的基础选择器吗？</p> <ul><li>可以</li> <li>后代选择器中的元素可以是任一一种基础选择器</li></ul></li></ul> <div class="custom-block warning"><p class="custom-block-title">WARNING</p> <p>思考：在书写后代选择器时，元素 1 和元素 2 一定要是父子关系吗？</p></div> <h4 id="_2-2-3-「后代选择器」练习-05-00"><a href="#_2-2-3-「后代选择器」练习-05-00" class="header-anchor">#</a> 2.2.3 「后代选择器」练习（05'00'')</h4> <blockquote><p>提示：要养成目录和文件命名的习惯。</p></blockquote> <ol><li><p>练习目标：练习<strong>后代选择器</strong></p></li> <li><p>练习步骤：</p> <ol><li>新建文件 <code>02-后代选择器.html</code>；</li> <li>将素材代码中的<strong>复合选择器</strong>中所有的 <code>li</code> 元素字体设置为蓝色；</li> <li>回答问题：在书写后代选择器时，元素 1 和元素 2 一定要是父子关系吗？</li></ol></li> <li><p>素材代码：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h3</span><span class="token punctuation">&gt;</span></span>基础选择器<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h3</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ul</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">&gt;</span></span>标签选择器<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">&gt;</span></span>类选择器<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">&gt;</span></span>id 选择器<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">&gt;</span></span>通配符选择器<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ul</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h3</span><span class="token punctuation">&gt;</span></span>复合选择器<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h3</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>adv-selector<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ul</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">&gt;</span></span>后代选择器<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">&gt;</span></span>子代选择器<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">&gt;</span></span>并集选择器<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">&gt;</span></span>伪类选择器<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ul</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
</code></pre></div></li></ol> <h3 id="_2-3-子元素选择器-二-03-20"><a href="#_2-3-子元素选择器-二-03-20" class="header-anchor">#</a> 2.3 子元素选择器（二 ~ 03'20''）</h3> <h4 id="_2-3-1-「子元素选择器」问题"><a href="#_2-3-1-「子元素选择器」问题" class="header-anchor">#</a> 2.3.1 「子元素选择器」问题</h4> <ul><li>问题 1：子代选择器的应用场景是什么？</li> <li>问题 2：子代选择器的语法格式是什么？元素之间使用什么符号分开？</li> <li>问题 3：子代选择器最终选中的元素是父代元素还是子代元素？</li></ul> <h4 id="_2-3-2-「子元素选择器」答案"><a href="#_2-3-2-「子元素选择器」答案" class="header-anchor">#</a> 2.3.2 「子元素选择器」答案</h4> <ul><li><p>问题 1：子代选择器的应用场景是什么？</p> <ul><li>选择某个元素最近一级的子元素（<strong>亲儿子</strong>）</li></ul></li> <li><p>问题 2：子代选择器的语法格式是什么？元素之间使用什么符号分开？</p> <ul><li><p>语法格式</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">选择器1 &gt; 选择器2</span> <span class="token punctuation">{</span>样式声明<span class="token punctuation">;</span><span class="token punctuation">}</span>
</code></pre></div></li> <li><p><strong>子代选择器</strong>的选择器之间使用 <code>&gt;</code> 分开。</p></li></ul></li> <li><p>问题 3：子代选择器最终选中的元素是父代元素还是子代元素？</p> <ul><li>子代选择器最终选中的元素是<strong>子代元素</strong> → <strong>亲儿子</strong></li></ul></li></ul> <h4 id="_2-3-3-「子元素选择器」练习-05-00"><a href="#_2-3-3-「子元素选择器」练习-05-00" class="header-anchor">#</a> 2.3.3 「子元素选择器」练习（05'00'')</h4> <blockquote><p>提示：要养成目录和文件命名的习惯。</p></blockquote> <ol><li><p>练习目标：练习<strong>子代选择器</strong></p></li> <li><p>练习步骤：</p> <ol><li>新建文件 <code>03-子代选择器.html</code>；</li> <li>将素材代码中<strong>我是儿子的 a 元素</strong>字体设置为红色；</li></ol></li> <li><p>素材代码：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>nav<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>我是儿子<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>我是孙子<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
</code></pre></div></li></ol> <h3 id="_2-4-课堂练习-二-02-49"><a href="#_2-4-课堂练习-二-02-49" class="header-anchor">#</a> 2.4 课堂练习（二 ~ 02'49''）</h3> <blockquote><p>pink 老师准备了两个课堂练习题目，观看视频时大家要一起互动哦。</p></blockquote> <h4 id="_2-4-1-课堂练习-1-后代选择器"><a href="#_2-4-1-课堂练习-1-后代选择器" class="header-anchor">#</a> 2.4.1 课堂练习 1 —— 后代选择器</h4> <ul><li><p>要求：将下面链接文字修改为红色。</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>nav<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ul</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>百度<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>百度<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ul</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
</code></pre></div></li> <li><p>答案</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.nav ul li a</span> <span class="token punctuation">{</span>
  <span class="token property">color</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div></li></ul> <h4 id="_2-4-2-课堂练习-2-子代选择器"><a href="#_2-4-2-课堂练习-2-子代选择器" class="header-anchor">#</a> 2.4.2 课堂练习 2 —— 子代选择器</h4> <ul><li><p>要求：将下面的大肘子修改为红色</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>hot<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>大肘子<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ul</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>猪头<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>猪尾巴<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ul</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
</code></pre></div></li> <li><p>答案</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.hot &gt; a</span> <span class="token punctuation">{</span>
  <span class="token property">color</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div></li></ul> <h3 id="☆2-5-并集选择器-二-6-14"><a href="#☆2-5-并集选择器-二-6-14" class="header-anchor">#</a> ☆2.5 并集选择器（二 ~ 6'14''）</h3> <h4 id="_2-5-1-「并集选择器」问题"><a href="#_2-5-1-「并集选择器」问题" class="header-anchor">#</a> 2.5.1 「并集选择器」问题</h4> <ul><li>问题 1：并集选择器的应用场景是什么？</li> <li>问题 2：并集选择器的语法格式是什么？元素之间使用什么符号分开？有什么注意点？</li> <li>问题 3：并集选择器可以使用<strong>后代选择器</strong>或<strong>子代选择器</strong>吗？</li></ul> <h4 id="_2-5-2-「并集选择器」答案"><a href="#_2-5-2-「并集选择器」答案" class="header-anchor">#</a> 2.5.2 「并集选择器」答案</h4> <ul><li><p>问题 1：并集选择器的应用场景是什么？</p> <ul><li><strong>集体声明</strong> —— 选择多组标签，同时设置相同的样式</li></ul></li> <li><p>问题 2：并集选择器的语法格式是什么？元素之间使用什么符号分开？有什么注意点？</p> <ul><li><p>语法格式</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">选择器1,
选择器2</span> <span class="token punctuation">{</span>
  样式声明<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div></li> <li><p><strong>并集选择器</strong>的选择器之间使用 <code>,</code> 分开，<strong>最后一个选择器不需要逗号</strong></p></li> <li><p>并集选择器通常会竖式排列选择器，提高代码的可读性</p></li></ul></li> <li><p>问题 3：并集选择器可以使用<strong>后代选择器</strong>或<strong>子代选择器</strong>吗？</p> <ul><li>可以</li></ul></li></ul> <h4 id="_2-5-3-「并集选择器」练习-05-00"><a href="#_2-5-3-「并集选择器」练习-05-00" class="header-anchor">#</a> 2.5.3 「并集选择器」练习（05'00'')</h4> <blockquote><p>提示：要养成目录和文件命名的习惯。</p></blockquote> <ol><li><p>练习目标：练习<strong>并集选择器</strong></p></li> <li><p>练习步骤：</p> <ol><li>新建文件 <code>并集选择器.html</code>；</li> <li>使用并集选择器把素材代码中的<strong>熊大</strong>、<strong>熊二</strong>和<strong>小猪一家</strong>改为粉色；</li></ol></li> <li><p>素材代码：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span>熊大<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>熊二<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span><span class="token punctuation">&gt;</span></span>光头强<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ul</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>pig<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">&gt;</span></span>小猪佩奇<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">&gt;</span></span>猪爸爸<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">&gt;</span></span>猪妈妈<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ul</span><span class="token punctuation">&gt;</span></span>
</code></pre></div></li></ol> <h3 id="_2-6-链接伪类选择器-上-二-09-39"><a href="#_2-6-链接伪类选择器-上-二-09-39" class="header-anchor">#</a> 2.6 链接伪类选择器(上)（二 ~ 09'39''）</h3> <div class="custom-block tip"><p class="custom-block-title">TIP</p> <p>伪类选择器使用<strong>单冒号</strong> <code>:</code>，是<strong>某种状态</strong>下的样式，例如 <code>:hover</code> 表示鼠标指向元素的状态。</p></div> <h4 id="_2-6-1-「链接伪类选择器-上-」问题"><a href="#_2-6-1-「链接伪类选择器-上-」问题" class="header-anchor">#</a> 2.6.1 「链接伪类选择器(上)」问题</h4> <ul><li>问题 1：链接伪类选择器的应用场景是什么？</li> <li>问题 2：链接伪类选择器一共有几个，分别表示什么含义？</li></ul> <h4 id="_2-6-2-「链接伪类选择器-上-」答案"><a href="#_2-6-2-「链接伪类选择器-上-」答案" class="header-anchor">#</a> 2.6.2 「链接伪类选择器(上)」答案</h4> <ul><li><p>问题 1：链接伪类选择器的应用场景是什么？</p> <ul><li>针对链接的<strong>不同状态</strong>设置<strong>不同的样式</strong></li></ul></li> <li><p>问题 2：链接伪类选择器一共有几个，分别表示什么含义？</p> <table><thead><tr><th>链接伪类选择器</th> <th>说明</th></tr></thead> <tbody><tr><td>a:link</td> <td>选择所有未被访问的链接</td></tr> <tr><td>a:visited</td> <td>选择所有已经被访问的链接</td></tr> <tr><td>a:hover</td> <td>选择鼠标指针位于其上的链接</td></tr> <tr><td>a:active</td> <td>选择激活链接（鼠标按下未抬起的链接</td></tr></tbody></table></li></ul> <h4 id="_2-6-3-「链接伪类选择器-上-」练习-05-00"><a href="#_2-6-3-「链接伪类选择器-上-」练习-05-00" class="header-anchor">#</a> 2.6.3 「链接伪类选择器(上)」练习（05'00'')</h4> <blockquote><p>提示：要养成目录和文件命名的习惯。</p></blockquote> <ol><li><p>练习目标：练习<strong>链接伪类选择器</strong></p></li> <li><p>练习步骤：</p> <ol><li>新建文件 <code>06-链接伪类选择器.html</code>；</li> <li>使用链接伪类选择器设置链接的四种状态样式。</li></ol></li> <li><p>参考代码如下：</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">a:link</span> <span class="token punctuation">{</span>
  <span class="token property">color</span><span class="token punctuation">:</span> #333<span class="token punctuation">;</span>
  <span class="token property">text-decoration</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">a:visited</span> <span class="token punctuation">{</span>
  <span class="token property">color</span><span class="token punctuation">:</span> orange<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">a:hover</span> <span class="token punctuation">{</span>
  <span class="token property">color</span><span class="token punctuation">:</span> skyblue<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">a:active</span> <span class="token punctuation">{</span>
  <span class="token property">color</span><span class="token punctuation">:</span> green<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div></li></ol> <h3 id="_2-7-链接伪类选择器-下-三-05-39"><a href="#_2-7-链接伪类选择器-下-三-05-39" class="header-anchor">#</a> 2.7 链接伪类选择器(下)（三 ~ 05'39''）</h3> <h4 id="_2-7-1-「链接伪类选择器-下-」问题"><a href="#_2-7-1-「链接伪类选择器-下-」问题" class="header-anchor">#</a> 2.7.1 「链接伪类选择器(下)」问题</h4> <ul><li>问题 1：链接伪类选择器的书写顺序有要求吗？如何记忆？</li> <li>问题 2：在实际开发中，需要给 a 标签单独设置样式吗？为什么？</li> <li>问题 3：在实际开发中，通常只使用链接伪类选择器的哪一个状态？为什么？</li></ul> <h4 id="_2-7-2-「链接伪类选择器-下-」答案"><a href="#_2-7-2-「链接伪类选择器-下-」答案" class="header-anchor">#</a> 2.7.2 「链接伪类选择器(下)」答案</h4> <ul><li><p>问题 1：链接伪类选择器的书写顺序有要求吗？如何记忆？</p> <ul><li>有</li> <li>LoVe HAte（爱与恨）</li></ul></li> <li><p>问题 2：在实际开发中，需要给 a 标签单独设置样式吗？为什么？</p> <ul><li>需要</li> <li>因为 a 标签是有点击跳转行为的，默认与其他文本的显示样式就不相同</li></ul></li> <li><p>问题 3：在实际开发中，通常只使用链接伪类选择器的哪一个状态？为什么？</p> <ul><li><p><code>:hover</code></p></li> <li><p>因为只有鼠标经过链接时，与用户的交互是最直接的</p></li> <li><p>示例代码如下：</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">a</span> <span class="token punctuation">{</span>
  <span class="token property">color</span><span class="token punctuation">:</span> #333<span class="token punctuation">;</span>
  <span class="token property">text-decoration</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">a:hover</span> <span class="token punctuation">{</span>
  <span class="token property">color</span><span class="token punctuation">:</span> skyblue<span class="token punctuation">;</span>
  <span class="token property">text-decoration</span><span class="token punctuation">:</span> underline<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div></li></ul></li></ul> <h3 id="_2-8-focus-伪类选择器-三-03-05"><a href="#_2-8-focus-伪类选择器-三-03-05" class="header-anchor">#</a> 2.8 focus 伪类选择器（三 ~ 03'05''）</h3> <h4 id="_2-8-1-「focus-伪类选择器」问题"><a href="#_2-8-1-「focus-伪类选择器」问题" class="header-anchor">#</a> 2.8.1 「focus 伪类选择器」问题</h4> <ul><li>问题 1：focus 伪类选择器的应用场景是什么？</li></ul> <h4 id="_2-8-2-「focus-伪类选择器」答案"><a href="#_2-8-2-「focus-伪类选择器」答案" class="header-anchor">#</a> 2.8.2 「focus 伪类选择器」答案</h4> <ul><li><p>问题 1：focus 伪类选择器的应用场景是什么？</p> <ul><li>在表单中突出显示当前获得焦点的表单元素，提升用户体验</li></ul></li></ul> <h4 id="_2-8-3-「focus-伪类选择器」练习-05-00"><a href="#_2-8-3-「focus-伪类选择器」练习-05-00" class="header-anchor">#</a> 2.8.3 「focus 伪类选择器」练习（05'00'')</h4> <blockquote><p>提示：要养成目录和文件命名的习惯。</p></blockquote> <ol><li><p>练习目标：练习<strong>focus 伪类选择器</strong></p></li> <li><p>练习步骤：</p> <ol><li>新建文件 <code>08-forcus伪类选择器.html</code>；</li> <li>使用 focus 伪类选择器，当输入框内获取焦点时，修改文本颜色和输入框的背景颜色。</li></ol></li> <li><p>素材代码：</p> <div class="language-html extra-class"><pre class="language-html"><code>用<span class="token entity named-entity" title="&amp;ensp;">&amp;ensp;</span>户<span class="token entity named-entity" title="&amp;ensp;">&amp;ensp;</span>名：<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text<span class="token punctuation">&quot;</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>username<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span> <span class="token punctuation">/&gt;</span></span>
密<span class="token entity named-entity" title="&amp;emsp;">&amp;emsp;</span><span class="token entity named-entity" title="&amp;emsp;">&amp;emsp;</span>码：<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>password<span class="token punctuation">&quot;</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>pwd<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span> <span class="token punctuation">/&gt;</span></span>
确认密码：<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>password<span class="token punctuation">&quot;</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>confimPwd<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
</code></pre></div></li></ol> <h3 id="☆2-9-复合选择器总结-三-03-03"><a href="#☆2-9-复合选择器总结-三-03-03" class="header-anchor">#</a> ☆2.9 复合选择器总结（三 ~ 03'03''）</h3> <table><thead><tr><th>选择器</th> <th>作用</th> <th>频率</th> <th>用法示例</th></tr></thead> <tbody><tr><td>后代</td> <td>找后代</td> <td>较高</td> <td>使用<strong>空格</strong>分隔 <code>.nav a</code></td></tr> <tr><td>子代</td> <td>找儿子</td> <td>较少</td> <td>使用 <code>&gt;</code> 分隔 <code>.nav&gt;a</code></td></tr> <tr><td>并集</td> <td>找大伙</td> <td>较多</td> <td>使用 <code>,</code> 分隔 <code>.nav, .header</code></td></tr> <tr><td>链接伪类</td> <td>链接状态</td> <td>较多</td> <td><code>a:hover</code> LoVe HAte</td></tr> <tr><td>focus</td> <td>表单状态</td> <td>较少</td> <td><code>input:focus</code></td></tr></tbody></table> <ul><li><p>链接伪类选择器</p> <table><thead><tr><th>链接伪类选择器</th> <th>说明</th></tr></thead> <tbody><tr><td>a:link</td> <td>选择所有未被访问的链接</td></tr> <tr><td>a:visited</td> <td>选择所有已经被访问的链接</td></tr> <tr><td>a:hover</td> <td>选择鼠标指针位于其上的链接</td></tr> <tr><td>a:active</td> <td>选择激活链接（鼠标按下未抬起的链接）</td></tr></tbody></table></li></ul> <h2 id="☆3-元素的显示模式-布局认知"><a href="#☆3-元素的显示模式-布局认知" class="header-anchor">#</a> ☆3. 元素的显示模式 —— 布局认知</h2> <h3 id="_3-1-什么是元素显示模式-三-04-14"><a href="#_3-1-什么是元素显示模式-三-04-14" class="header-anchor">#</a> 3.1 什么是元素显示模式（三 ~ 04'14''）</h3> <h4 id="_3-1-1-「什么是元素显示模式」问题"><a href="#_3-1-1-「什么是元素显示模式」问题" class="header-anchor">#</a> 3.1.1 「什么是元素显示模式」问题</h4> <ul><li>问题 1：什么是元素显示模式？HTML 元素一般有几种显示模式？</li> <li>问题 2：猜一猜<strong>块元素</strong>和<strong>行内元素</strong>有什么特点？</li></ul> <h4 id="_3-1-2-「什么是元素显示模式」答案"><a href="#_3-1-2-「什么是元素显示模式」答案" class="header-anchor">#</a> 3.1.2 「什么是元素显示模式」答案</h4> <ul><li><p>问题 1：什么是元素显示模式？</p> <ul><li>元素以什么方式进行显示</li> <li>HTML 一般有<strong>两种</strong>显示模式</li></ul></li> <li><p>问题 2：猜一猜<strong>块元素</strong>和<strong>行内元素</strong>有什么特点？</p> <ul><li>块元素独占一行显示</li> <li>行内元素可以一行显示多个</li></ul></li></ul> <h3 id="_3-2-块元素-block-三-06-38"><a href="#_3-2-块元素-block-三-06-38" class="header-anchor">#</a> 3.2 块元素 —— block（三 ~ 06'38''）</h3> <h4 id="_3-2-1-「块元素」问题"><a href="#_3-2-1-「块元素」问题" class="header-anchor">#</a> 3.2.1 「块元素」问题</h4> <ul><li>问题 1：块级元素有什么特点？</li> <li>问题 2：块级元素有什么注意事项？</li> <li>问题 3：常见的块级元素有哪些？如何验证？</li></ul> <h4 id="_3-2-2-「块元素」答案"><a href="#_3-2-2-「块元素」答案" class="header-anchor">#</a> 3.2.2 「块元素」答案</h4> <ul><li><p>问题 1：块级元素有什么特点？</p> <ol><li>独占一行</li> <li>可以设置<strong>宽度</strong>、<strong>高度</strong>、<strong>外边距</strong>、<strong>边框</strong>和<strong>内边距</strong></li> <li>宽度默认是父级容器的宽度</li> <li>可以存放其他行内元素和块级元素</li></ol></li> <li><p>问题 2：块级元素有什么注意事项？</p> <ul><li>开发时不要在<strong>文本类元素</strong>中添加其他元素，专注于文本存放（<code>h1~h6</code>、<code>p</code>）</li></ul></li> <li><p>问题 3：常见的块级元素有哪些？如何验证？</p> <ul><li><code>div</code>、<code>ul</code>、<code>ol</code>、<code>li</code>、<code>h1~h6</code>、<code>p</code></li> <li>在 HTML 中添加一个盒子，在 Chrome 调试器中验证是否具有块级元素特征</li></ul></li></ul> <h3 id="_3-3-行内元素-inline-三-05-36"><a href="#_3-3-行内元素-inline-三-05-36" class="header-anchor">#</a> 3.3 行内元素 —— inline（三 ~ 05'36''）</h3> <h4 id="_3-3-1-「行内元素」问题"><a href="#_3-3-1-「行内元素」问题" class="header-anchor">#</a> 3.3.1 「行内元素」问题</h4> <ul><li>问题 1：行内元素有什么特点？</li> <li>问题 2：行内元素有什么注意事项？</li> <li>问题 3：a 标签中能够放块级元素吗？应用场景是什么？</li></ul> <h4 id="_3-3-2-「行内元素」答案"><a href="#_3-3-2-「行内元素」答案" class="header-anchor">#</a> 3.3.2 「行内元素」答案</h4> <ul><li><p>问题 1：行内元素有什么特点？</p> <ol><li>相邻行内元素在一行显示，一行多个</li> <li>给行内元素设置宽高是无效的</li> <li>默认宽度是内容的宽度（被内容撑开）</li> <li>只能容纳文本或其他行内元素</li></ol></li> <li><p>问题 2：行内元素有什么注意事项？</p> <ol><li>链接不能再放链接</li> <li>特殊情况的链接可以存放块级元素</li></ol></li> <li><p>问题 3：a 标签中能够放块级元素吗？应用场景是什么？</p> <ol><li>特殊情况下可以存放块级元素</li> <li>应用场景：在电商网站点击商品列表项跳转到商品明细项</li></ol></li></ul> <h3 id="_3-4-行内块元素-inline-block-三-03-43"><a href="#_3-4-行内块元素-inline-block-三-03-43" class="header-anchor">#</a> 3.4 行内块元素 —— inline-block（三 ~ 03'43''）</h3> <h4 id="_3-4-1-「行内块元素」问题"><a href="#_3-4-1-「行内块元素」问题" class="header-anchor">#</a> 3.4.1 「行内块元素」问题</h4> <ul><li>问题 1：行内块元素有什么特点？</li> <li>问题 2：我们现在学习过的标签中，有那三个是行内块元素？</li></ul> <h4 id="_3-4-2-「行内块元素」答案"><a href="#_3-4-2-「行内块元素」答案" class="header-anchor">#</a> 3.4.2 「行内块元素」答案</h4> <ul><li><p>问题 1：行内块元素有什么特点？</p> <ol><li>相邻行内元素在一行显示，一行多个（行内元素特点）</li> <li>默认宽度就是本身内容的宽度（行内元素特点）</li> <li>可以设置<strong>宽度</strong>、<strong>高度</strong>、<strong>外边距</strong>、<strong>边框</strong>和<strong>内边距</strong>（块级元素特点）</li></ol></li> <li><p>问题 2：我们现在学习过的标签中，有那三个是行内块元素？</p> <ul><li><code>img</code>、<code>input</code>、<code>td</code></li></ul></li></ul> <h3 id="☆3-5-元素显示模式总结-三-03-09"><a href="#☆3-5-元素显示模式总结-三-03-09" class="header-anchor">#</a> ☆3.5 元素显示模式总结 ——（三 ~ 03'09''）</h3> <table><thead><tr><th>元素模式</th> <th>英文</th> <th>排列方式</th> <th>指定宽高</th></tr></thead> <tbody><tr><td>块级元素</td> <td>block</td> <td>一行一个</td> <td>可以</td></tr> <tr><td>行内元素</td> <td>inline</td> <td>一行多个，内容撑开</td> <td>不可以</td></tr> <tr><td>行内块元素</td> <td>inline-block</td> <td>一行多个</td> <td>可以</td></tr></tbody></table> <h3 id="☆3-6-显示模式的转换-四-08-16"><a href="#☆3-6-显示模式的转换-四-08-16" class="header-anchor">#</a> ☆3.6 显示模式的转换（四 ~ 08'16''）</h3> <h4 id="_3-6-1-「显示模式的转换」问题"><a href="#_3-6-1-「显示模式的转换」问题" class="header-anchor">#</a> 3.6.1 「显示模式的转换」问题</h4> <ul><li>问题 1：显示模式转换的应用场景是什么？</li> <li>问题 2：三种显示模式转换的代码是什么？哪两个比较重要？</li></ul> <h4 id="_3-6-2-「显示模式的转换」答案"><a href="#_3-6-2-「显示模式的转换」答案" class="header-anchor">#</a> 3.6.2 「显示模式的转换」答案</h4> <ul><li><p>问题 1：显示模式转换的应用场景是什么？</p> <ul><li>让行内元素具有宽高：把<strong>行内元素</strong>转换成<strong>块元素</strong>或者<strong>行内块元素</strong></li> <li>让块元素一行显示：把<strong>块元素</strong>转换成<strong>行内块元素</strong></li></ul></li> <li><p>问题 2：三种显示模式转换的代码是什么？哪两个比较重要？</p> <ul><li><code>display: block</code> 转换为块元素</li> <li><code>display: inline-block</code> 转换为行内块元素</li> <li><code>display: inline</code> 转化为行内元素（使用较少）</li></ul></li></ul> <div class="custom-block tip"><p class="custom-block-title">TIP</p> <p>在写 CSS 时，记住把 display 转换显示模式的设置写在第一行。</p></div> <h3 id="☆3-7-简单小米侧边栏-四-07-29"><a href="#☆3-7-简单小米侧边栏-四-07-29" class="header-anchor">#</a> ☆3.7 简单小米侧边栏（四 ~ 07'29''）</h3> <h4 id="_3-7-1-「简单小米侧边栏」演练目标"><a href="#_3-7-1-「简单小米侧边栏」演练目标" class="header-anchor">#</a> 3.7.1 「简单小米侧边栏」演练目标</h4> <ol><li>显示模式转换</li> <li>链接伪类选择器</li></ol> <h4 id="_3-7-2-「简单小米侧边栏」思路"><a href="#_3-7-2-「简单小米侧边栏」思路" class="header-anchor">#</a> 3.7.2 「简单小米侧边栏」思路</h4> <ol><li>将 a 标签转换为<strong>块级元素</strong>，设置默认显示属性</li> <li>设置 a 标签鼠标经过状态</li></ol> <h4 id="_3-7-3-「简单小米侧边栏」素材"><a href="#_3-7-3-「简单小米侧边栏」素材" class="header-anchor">#</a> 3.7.3 「简单小米侧边栏」素材</h4> <ol><li><p>HTML 素材</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>手机 电话卡<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>电视 盒子<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>笔记本 平板<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>出行 穿戴<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>智能 路由器<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>健康 儿童<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>耳机 音响<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span>
</code></pre></div></li> <li><p>尺寸：<code>230px * 40px</code></p></li> <li><p>颜色：<code>#555</code> / <code>#f70</code></p></li></ol> <h4 id="_3-7-4-「简单小米侧边栏」参考代码"><a href="#_3-7-4-「简单小米侧边栏」参考代码" class="header-anchor">#</a> 3.7.4 「简单小米侧边栏」参考代码</h4> <div class="language-css extra-class"><pre class="language-css"><code><span class="token comment">/* 1. 将 a 标签转换为块级元素，设置默认显示属性 */</span>
<span class="token selector">a</span> <span class="token punctuation">{</span>
  <span class="token property">display</span><span class="token punctuation">:</span> block<span class="token punctuation">;</span>
  <span class="token property">width</span><span class="token punctuation">:</span> 230px<span class="token punctuation">;</span>
  <span class="token property">height</span><span class="token punctuation">:</span> 40px<span class="token punctuation">;</span>
  <span class="token property">color</span><span class="token punctuation">:</span> #fff<span class="token punctuation">;</span>
  <span class="token property">font-size</span><span class="token punctuation">:</span> 14px<span class="token punctuation">;</span>
  <span class="token property">background-color</span><span class="token punctuation">:</span> #555<span class="token punctuation">;</span>
  <span class="token property">text-decoration</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>
  <span class="token property">text-indent</span><span class="token punctuation">:</span> 2em<span class="token punctuation">;</span>
  <span class="token property">line-height</span><span class="token punctuation">:</span> 40px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token comment">/* 2. 设置 a 标签鼠标经过状态 */</span>
<span class="token selector">a:hover</span> <span class="token punctuation">{</span>
  <span class="token property">background-color</span><span class="token punctuation">:</span> #f70<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><h3 id="☆3-8-单行文字垂直居中-四-07-10"><a href="#☆3-8-单行文字垂直居中-四-07-10" class="header-anchor">#</a> ☆3.8 单行文字垂直居中（四 ~ 07'10''）</h3> <h4 id="_3-8-1-「单行文字垂直居中」问题"><a href="#_3-8-1-「单行文字垂直居中」问题" class="header-anchor">#</a> 3.8.1 「单行文字垂直居中」问题</h4> <ul><li>问题 1：如何实现单行文字的垂直居中？</li></ul> <h4 id="_3-8-2-「单行文字垂直居中」答案"><a href="#_3-8-2-「单行文字垂直居中」答案" class="header-anchor">#</a> 3.8.2 「单行文字垂直居中」答案</h4> <ul><li><p>问题 1：如何实现单行文字的垂直居中？</p> <ul><li>将 <code>line-height</code> 设置为盒子的高度。</li></ul></li></ul> <h4 id="_3-8-3-「单行文字垂直居中」练习-00-20"><a href="#_3-8-3-「单行文字垂直居中」练习-00-20" class="header-anchor">#</a> 3.8.3 「单行文字垂直居中」练习（00:20'')</h4> <blockquote><p>提示：要养成目录和文件命名的习惯。</p></blockquote> <ul><li>修改「简单小米侧边栏」案例，让链接文字垂直居中。</li></ul> <h2 id="_4-背景图片-样式"><a href="#_4-背景图片-样式" class="header-anchor">#</a> 4. 背景图片 —— 样式</h2> <h3 id="_4-1-背景颜色-四-04-01"><a href="#_4-1-背景颜色-四-04-01" class="header-anchor">#</a> 4.1 背景颜色（四 ~ 04'01''）</h3> <h4 id="_4-1-1-「背景颜色」问题"><a href="#_4-1-1-「背景颜色」问题" class="header-anchor">#</a> 4.1.1 「背景颜色」问题</h4> <ul><li>问题 1：CSS 中背景相关的属性多吗？</li> <li>问题 2：一般情况下元素的背景颜色是什么？</li></ul> <h4 id="_4-1-2-「背景颜色」答案"><a href="#_4-1-2-「背景颜色」答案" class="header-anchor">#</a> 4.1.2 「背景颜色」答案</h4> <ul><li><p>问题 1：CSS 中背景相关的属性多吗？</p> <ul><li>多</li></ul></li> <li><p>问题 2：一般情况下元素的背景颜色是什么？</p> <ul><li><code>transparent</code> 透明的</li></ul></li></ul> <h3 id="_4-2-背景图片-四-04-25"><a href="#_4-2-背景图片-四-04-25" class="header-anchor">#</a> 4.2 背景图片（四 ~ 04'25''）</h3> <h4 id="_4-2-1-「背景图片」问题"><a href="#_4-2-1-「背景图片」问题" class="header-anchor">#</a> 4.2.1 「背景图片」问题</h4> <ul><li>问题 1：背景图片的应用场景是什么？</li> <li>问题 2：背景图片有什么优点？</li> <li>问题 3：背景图片的语法是什么？</li> <li>问题 4：指定背景图片的 url 时需要引号吗？</li></ul> <h4 id="_4-2-2-「背景图片」答案"><a href="#_4-2-2-「背景图片」答案" class="header-anchor">#</a> 4.2.2 「背景图片」答案</h4> <ul><li><p>问题 1：背景图片的应用场景是什么？</p> <ol><li>logo</li> <li>装饰图片</li> <li>超大图片</li> <li>精灵图（雪碧图）</li></ol></li> <li><p>问题 2：背景图片有什么优点？</p> <ul><li>非常容易控制位置</li></ul></li> <li><p>问题 3：背景图片的语法是什么？</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token property">background-image</span><span class="token punctuation">:</span> none | <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span>url<span class="token punctuation">)</span></span><span class="token punctuation">;</span>
</code></pre></div></li> <li><p>问题 4：指定背景图片的 url 时需要引号吗？</p> <ul><li>不需要、不需要、不需要</li></ul></li></ul> <h3 id="_4-3-背景平铺-五-05-16"><a href="#_4-3-背景平铺-五-05-16" class="header-anchor">#</a> 4.3 背景平铺（五 ~ 05'16''）</h3> <h4 id="_4-3-1-「背景平铺」问题"><a href="#_4-3-1-「背景平铺」问题" class="header-anchor">#</a> 4.3.1 「背景平铺」问题</h4> <ul><li>问题 1：在使用背景图片时，默认背景是平铺的吗？</li> <li>问题 2：背景平铺有哪些属性？</li> <li>问题 3：使用了背景图片还能再指定背景颜色吗？</li></ul> <h4 id="_4-3-2-「背景平铺」答案"><a href="#_4-3-2-「背景平铺」答案" class="header-anchor">#</a> 4.3.2 「背景平铺」答案</h4> <ul><li><p>问题 1：在使用背景图片时，默认背景是平铺的吗？</p> <ul><li>默认是平铺的</li></ul></li> <li><p>问题 2：背景平铺 <code>background-repeat</code> 有哪些属性？</p> <table><thead><tr><th>参数</th> <th>说明</th></tr></thead> <tbody><tr><td>repeat</td> <td>默认，水平垂直平铺</td></tr> <tr><td>no-repeat</td> <td>不平铺</td></tr> <tr><td>repeat-x</td> <td>水平平铺</td></tr> <tr><td>repeat-y</td> <td>垂直平铺</td></tr></tbody></table></li> <li><p>问题 3：使用了背景图片还能再指定背景颜色吗？</p> <ul><li>可以</li></ul></li></ul> <h3 id="_4-4-背景位置-方位名词-五-07-34"><a href="#_4-4-背景位置-方位名词-五-07-34" class="header-anchor">#</a> 4.4 背景位置-方位名词（五 ~ 07'34''）</h3> <h4 id="_4-4-1-「背景位置-方位名词」问题"><a href="#_4-4-1-「背景位置-方位名词」问题" class="header-anchor">#</a> 4.4.1 「背景位置-方位名词」问题</h4> <ul><li>问题 1：哪一个属性可以改变图片在背景中的位置？</li> <li>问题 2：使用方位名词指定背景图片有顺序要求吗？</li> <li>问题 3：方位名词都分别对应哪些方位？</li> <li>问题 4：如果指指定了一个方位名词，第二个值默认如何对齐？</li> <li>问题 5：如何让背景图片水平垂直居中？</li></ul> <h4 id="_4-4-2-「背景位置-方位名词」答案"><a href="#_4-4-2-「背景位置-方位名词」答案" class="header-anchor">#</a> 4.4.2 「背景位置-方位名词」答案</h4> <ul><li><p>问题 1：哪一个属性可以改变图片在背景中的位置？</p> <ul><li><code>background-position</code> (背景位置)</li></ul></li> <li><p>问题 2：使用方位名词指定背景图片有顺序要求吗？</p> <ul><li>没有</li> <li>因为从方位名词能够分清方向</li></ul></li> <li><p>问题 3：方位名词都分别对应哪些方位？</p> <ul><li>水平方向：<code>left</code> / <code>right</code> / <code>center</code></li> <li>垂直方向：<code>top</code> / <code>bottom</code> / <code>center</code></li></ul></li> <li><p>问题 4：如果指指定了一个方位名词，第二个值默认如何对齐？</p> <ul><li>居中对齐</li></ul></li> <li><p>问题 5：如何让背景图片水平垂直居中？</p> <ul><li><code>background-position: center;</code></li></ul></li></ul> <h3 id="☆4-5-背景位置案例一-五-06-57"><a href="#☆4-5-背景位置案例一-五-06-57" class="header-anchor">#</a> ☆4.5 背景位置案例一（五 ~ 06'57''）</h3> <h4 id="_4-5-1-「案例」演练目标"><a href="#_4-5-1-「案例」演练目标" class="header-anchor">#</a> 4.5.1 「案例」演练目标</h4> <ul><li>练习背景图片位置</li> <li>复习文字属性</li></ul> <h5 id="背景位置案例一图片素材"><a href="#背景位置案例一图片素材" class="header-anchor">#</a> 背景位置案例一图片素材</h5> <p><img src="" alt="icon"></p> <h4 id="_4-5-2-「案例」思路"><a href="#_4-5-2-「案例」思路" class="header-anchor">#</a> 4.5.2 「案例」思路</h4> <ol><li>设置 h3 基本显示，<strong>增加背景颜色辅助调试</strong></li> <li>增加背景图片，并设置平铺和位置</li> <li>修改文本缩进</li> <li>删除背景颜色</li></ol> <h4 id="_4-5-4-「案例」参考代码"><a href="#_4-5-4-「案例」参考代码" class="header-anchor">#</a> 4.5.4 「案例」参考代码</h4> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">h3</span> <span class="token punctuation">{</span>
  <span class="token comment">/* 1. 设置 h3 基本显示，增加背景颜色辅助调试 */</span>
  <span class="token property">width</span><span class="token punctuation">:</span> 118px<span class="token punctuation">;</span>
  <span class="token property">height</span><span class="token punctuation">:</span> 40px<span class="token punctuation">;</span>
  <span class="token property">background-color</span><span class="token punctuation">:</span> pink<span class="token punctuation">;</span>
  <span class="token property">font-size</span><span class="token punctuation">:</span> 14px<span class="token punctuation">;</span>
  <span class="token property">font-weight</span><span class="token punctuation">:</span> 400<span class="token punctuation">;</span>
  <span class="token property">line-height</span><span class="token punctuation">:</span> 40px<span class="token punctuation">;</span>

  <span class="token comment">/* 2. 增加背景图片，并设置平铺和位置 */</span>
  <span class="token property">background-image</span><span class="token punctuation">:</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span>./images/icon.png<span class="token punctuation">)</span></span><span class="token punctuation">;</span>
  <span class="token property">background-repeat</span><span class="token punctuation">:</span> no-repeat<span class="token punctuation">;</span>
  <span class="token property">background-position</span><span class="token punctuation">:</span> left<span class="token punctuation">;</span>

  <span class="token comment">/* 3. 修改文本缩进 */</span>
  <span class="token property">text-indent</span><span class="token punctuation">:</span> 1.5em<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><h3 id="☆4-6-王者荣耀背景图片-五-04-57"><a href="#☆4-6-王者荣耀背景图片-五-04-57" class="header-anchor">#</a> ☆4.6 王者荣耀背景图片（五 ~ 04'57''）</h3> <h4 id="_4-6-1-「案例」演练目标"><a href="#_4-6-1-「案例」演练目标" class="header-anchor">#</a> 4.6.1 「案例」演练目标</h4> <ul><li>练习背景图片位置</li> <li>知道使用超大图作为背景图片的设置套路</li></ul> <h5 id="王者荣耀背景图片素材"><a href="#王者荣耀背景图片素材" class="header-anchor">#</a> 王者荣耀背景图片素材</h5> <p><img src="/basenode/assets/img/bg.af566efb.jpg" alt="王者荣耀背景"></p> <h4 id="_4-6-2-设置超大图背景图片套路"><a href="#_4-6-2-设置超大图背景图片套路" class="header-anchor">#</a> 4.6.2 设置超大图背景图片套路</h4> <ol><li><p>给 body 设置样式</p></li> <li><p>平铺方式 <code>no-repeat</code> / 设置图片位置 <code>top</code></p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">body</span> <span class="token punctuation">{</span>
  <span class="token property">background-image</span><span class="token punctuation">:</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span>./images/bg.jpg<span class="token punctuation">)</span></span><span class="token punctuation">;</span>
  <span class="token property">background-repeat</span><span class="token punctuation">:</span> no-repeat<span class="token punctuation">;</span>
  <span class="token property">background-position</span><span class="token punctuation">:</span> top<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div></li></ol> <h3 id="_4-7-背景位置-精确单位-五-04-01"><a href="#_4-7-背景位置-精确单位-五-04-01" class="header-anchor">#</a> 4.7 背景位置-精确单位（五 ~ 04'01''）</h3> <h4 id="_4-7-1-「背景位置-精确单位」问题"><a href="#_4-7-1-「背景位置-精确单位」问题" class="header-anchor">#</a> 4.7.1 「背景位置-精确单位」问题</h4> <ul><li>问题 1：使用精确坐标指定背景图片有顺序要求吗？</li> <li>问题 2：如果只指定了一个值，是哪个方向的值？另一个方向呢？</li></ul> <h4 id="_4-7-2-「背景位置-精确单位」答案"><a href="#_4-7-2-「背景位置-精确单位」答案" class="header-anchor">#</a> 4.7.2 「背景位置-精确单位」答案</h4> <ul><li><p>问题 1：使用精确坐标指定背景图片有顺序要求吗？</p> <ul><li>有</li> <li>第一个值一定是 <code>x</code> / 第二个值一定是 <code>y</code></li></ul></li> <li><p>问题 2：如果只指定了一个值，是哪个方向的值？另一个方向呢？</p> <ul><li><code>x</code> 方向的</li> <li>垂直方向居中显示</li></ul></li></ul> <h3 id="_4-8-30-背景位置-混合单位-五-04-07"><a href="#_4-8-30-背景位置-混合单位-五-04-07" class="header-anchor">#</a> 4.8 30-背景位置-混合单位（五 ~ 04'07''）</h3> <h4 id="_4-8-1-「30-背景位置-混合单位」问题"><a href="#_4-8-1-「30-背景位置-混合单位」问题" class="header-anchor">#</a> 4.8.1 「30-背景位置-混合单位」问题</h4> <ul><li>问题 1：指定背景图片可以混合使用单位吗？顺序有没有要求？</li></ul> <h4 id="_4-8-2-「30-背景位置-混合单位」答案"><a href="#_4-8-2-「30-背景位置-混合单位」答案" class="header-anchor">#</a> 4.8.2 「30-背景位置-混合单位」答案</h4> <ul><li><p>问题 1：指定背景图片可以混合使用单位吗？顺序有没有要求？</p> <ul><li>可以</li> <li>第一个值一定是 <code>x</code> / 第二个值一定是 <code>y</code></li></ul></li></ul> <h3 id="_4-9-背景固定-六-04-21"><a href="#_4-9-背景固定-六-04-21" class="header-anchor">#</a> 4.9 背景固定（六 ~ 04'21''）</h3> <h4 id="_4-9-1-「背景固定」问题"><a href="#_4-9-1-「背景固定」问题" class="header-anchor">#</a> 4.9.1 「背景固定」问题</h4> <ul><li>问题 1：背景固定的应用场景是什么？</li> <li>问题 2：<code>background-attachment</code> 有哪两个参数？分别代表什么含义？</li></ul> <h4 id="_4-9-2-「背景固定」答案"><a href="#_4-9-2-「背景固定」答案" class="header-anchor">#</a> 4.9.2 「背景固定」答案</h4> <ul><li><p>问题 1：背景固定的应用场景是什么？</p> <ul><li>可以制作视差滚动效果</li></ul></li> <li><p>问题 2：<code>background-attachment</code> 有哪两个参数？分别代表什么含义？</p> <ul><li><code>scroll</code> 默认，背景图像跟随滚动</li> <li><code>fixed</code> 背景图像固定</li></ul></li></ul> <h3 id="_4-10-背景属性复合写法-六-02-59"><a href="#_4-10-背景属性复合写法-六-02-59" class="header-anchor">#</a> 4.10 背景属性复合写法（六 ~ 02'59''）</h3> <h4 id="_4-10-1-「背景属性复合写法」问题"><a href="#_4-10-1-「背景属性复合写法」问题" class="header-anchor">#</a> 4.10.1 「背景属性复合写法」问题</h4> <ul><li>问题 1：我们已经学过了哪个属性的复合写法？</li> <li>问题 2：背景属性的复合写法有顺序要求吗？</li> <li>问题 3：背景属性的复合写法在开发中用的多吗？每次都要写全吗？</li></ul> <h4 id="_4-10-2-「背景属性复合写法」答案"><a href="#_4-10-2-「背景属性复合写法」答案" class="header-anchor">#</a> 4.10.2 「背景属性复合写法」答案</h4> <ul><li><p>问题 1：我们已经学过了哪个属性的复合写法？</p> <ul><li><code>font: font-style font-weight font-size/line-height font-family</code></li></ul></li> <li><p>问题 2：背景属性的复合写法有顺序要求吗？</p> <ul><li>没有</li> <li>但是推荐顺序是：<code>background: color image repeat attachment position</code></li></ul></li> <li><p>问题 3：背景属性的复合写法在开发中用的多吗？每次都要写全吗？</p> <ul><li>多</li> <li>不需要每次都要写全，需要啥就写啥</li></ul></li></ul> <h3 id="_4-11-背景颜色半透明-六-06-31"><a href="#_4-11-背景颜色半透明-六-06-31" class="header-anchor">#</a> 4.11 背景颜色半透明（六 ~ 06'31''）</h3> <h4 id="_4-11-1-「背景颜色半透明」问题"><a href="#_4-11-1-「背景颜色半透明」问题" class="header-anchor">#</a> 4.11.1 「背景颜色半透明」问题</h4> <ul><li>问题 1：使用 <code>background-color</code> 能够设置背景颜色半透明吗？为什么？</li> <li>问题 2：<code>rgba</code> 中的 alpha 取值范围是多少？</li></ul> <h4 id="_4-11-2-「背景颜色半透明」答案"><a href="#_4-11-2-「背景颜色半透明」答案" class="header-anchor">#</a> 4.11.2 「背景颜色半透明」答案</h4> <ul><li><p>问题 1：使用 <code>background-color</code> 能够设置背景颜色半透明吗？为什么？</p> <ul><li>可以 <code>background: rgba(0, 0, 0, 0.3);</code> 本质上就是在设置背景颜色。</li></ul></li> <li><p>问题 2：<code>rgba</code> 中的 alpha 取值范围是多少？</p> <ul><li>取值范围：<code>0 ~ 1</code></li> <li><code>0</code> 完全透明 / <code>1</code> 完全不透明</li></ul></li></ul> <h3 id="☆4-12-背景总结-六-03-44"><a href="#☆4-12-背景总结-六-03-44" class="header-anchor">#</a> ☆4.12 背景总结（六 ~ 03'44''）</h3> <table><thead><tr><th>属性</th> <th>作用</th> <th>值</th></tr></thead> <tbody><tr><td>background-color</td> <td>颜色</td> <td>颜色 / <code>#f00</code> / <code>rgba(red, green, blue, alpha)</code></td></tr> <tr><td>background-image</td> <td>图像</td> <td><code>url(图片路径)</code></td></tr> <tr><td>background-repeat</td> <td>平铺</td> <td><code>repeat</code> / <code>no-repeat</code> / <code>repeat-x</code> / <code>repeat-y</code></td></tr> <tr><td>background-position</td> <td>位置</td> <td><code>x</code>, <code>y</code> / <code>left right center</code> <code>top bottom center</code></td></tr> <tr><td>background-attachment</td> <td>附着方式</td> <td><code>scroll</code> / <code>fixed</code></td></tr></tbody></table> <blockquote><p>复合写法推荐顺序：<code>background: color image repeat attachment position</code>。</p></blockquote> <h2 id="_5-综合案例-五彩导航栏"><a href="#_5-综合案例-五彩导航栏" class="header-anchor">#</a> 5. 综合案例 —— 五彩导航栏</h2> <h3 id="_5-1-「案例」演练目标"><a href="#_5-1-「案例」演练目标" class="header-anchor">#</a> 5.1 「案例」演练目标</h3> <ol><li>显示模式转换</li> <li>控制文字水平居中、垂直居中</li> <li>设置链接的背景图片</li> <li>链接伪类选择器</li></ol> <h4 id="五彩导航栏素材"><a href="#五彩导航栏素材" class="header-anchor">#</a> 五彩导航栏素材</h4> <p><img src="" alt="bg1"> <img src="" alt="bg2"> <img src="" alt="bg3"> <img src="" alt="bg4"> <img src="" alt="bg5"> <img src="" alt="bg11"> <img src="" alt="bg22"></p> <h3 id="_5-2-开发步骤"><a href="#_5-2-开发步骤" class="header-anchor">#</a> 5.2 开发步骤</h3> <ol><li>搭建 HTML 结构</li> <li>修改 a 标签的显示模式</li> <li>设置常规属性</li> <li>设置背景图像</li> <li>鼠标经过时修改背景图像</li></ol> <h3 id="_5-3-代码实现"><a href="#_5-3-代码实现" class="header-anchor">#</a> 5.3 代码实现</h3> <h4 id="_5-3-1-搭建-html-结构"><a href="#_5-3-1-搭建-html-结构" class="header-anchor">#</a> 5.3.1 搭建 HTML 结构</h4> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>nav<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>五彩导航栏<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>五彩导航栏<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>五彩导航栏<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>五彩导航栏<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>五彩导航栏<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><h4 id="_5-3-2-修改-a-标签的显示模式"><a href="#_5-3-2-修改-a-标签的显示模式" class="header-anchor">#</a> 5.3.2 修改 a 标签的显示模式</h4> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.nav a</span> <span class="token punctuation">{</span>
  <span class="token property">display</span><span class="token punctuation">:</span> inline-block<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><h4 id="_5-3-3-设置常规属性"><a href="#_5-3-3-设置常规属性" class="header-anchor">#</a> 5.3.3 设置常规属性</h4> <div class="language-css extra-class"><pre class="language-css"><code><span class="token property">width</span><span class="token punctuation">:</span> 120px<span class="token punctuation">;</span>
<span class="token property">height</span><span class="token punctuation">:</span> 58px<span class="token punctuation">;</span>
<span class="token property">background-color</span><span class="token punctuation">:</span> pink<span class="token punctuation">;</span>
<span class="token property">text-align</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
<span class="token property">line-height</span><span class="token punctuation">:</span> 58px<span class="token punctuation">;</span>
<span class="token property">color</span><span class="token punctuation">:</span> #fff<span class="token punctuation">;</span>
<span class="token property">text-decoration</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>
</code></pre></div><h4 id="_5-3-4-设置背景图像"><a href="#_5-3-4-设置背景图像" class="header-anchor">#</a> 5.3.4 设置背景图像</h4> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.nav &gt; .bg1</span> <span class="token punctuation">{</span>
  <span class="token property">background</span><span class="token punctuation">:</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span>./images/bg1.png<span class="token punctuation">)</span></span> no-repeat<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><h4 id="_5-3-5-鼠标经过时修改背景图像"><a href="#_5-3-5-鼠标经过时修改背景图像" class="header-anchor">#</a> 5.3.5 鼠标经过时修改背景图像</h4> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.nav &gt; .bg1:hover</span> <span class="token punctuation">{</span>
  <span class="token property">background</span><span class="token punctuation">:</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span>./images/bg11.png<span class="token punctuation">)</span></span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
      ←
      <a href="/basenode/css/day01.html" class="prev">
        CSS 第 01 天 —— 基础选择器
      </a></span> <span class="next"><a href="/basenode/css/day03.html">
        CSS 第 03 天 —— 盒子模型
      </a>
      →
    </span></p></div> </main></div><div class="global-ui"><!----></div></div>
    <script src="/basenode/assets/js/app.52c57e5d.js" defer></script><script src="/basenode/assets/js/2.fd1002bd.js" defer></script><script src="/basenode/assets/js/5.88e4a4fd.js" defer></script>
  </body>
</html>
